<template>
  <div> 
        <h2>我是父级</h2>
        <hr>
        <!-- <Page-child :text="123321">这样也是传数字类型</Page-child> -->
        <Page-child :text="123321"></Page-child>

         <Page-child text="同意" ></Page-child>
        <!-- type="primary"  蓝色
        type="success"  绿色
        type="danger"  红色
                        白色 -->
        <Page-child type="primary" text="同意" ></Page-child>
        <Page-child type="success" size="medium" text="同意" ></Page-child>
        <Page-child size="small" type="danger" text="同意" ></Page-child>
        <!-- 
        参数      说明        类型                   可选值                             默认值
        text     按钮文本     String                  -                                   确定
        type     类型         String                 primary/danger/success               
        size     按钮尺寸      String                 medium/small               
       -->

  </div>
</template>

<script>
import PageChild from '../components/PageChild.vue'
export default {
    components:{
        PageChild
    },
    data(){
        return{
            val:123321
        }
    }

}
// data-v-6bfc9b95
// data-v-4c795f5b
</script>

<style scoped>
/* scoped 的作用和原理   
作用解决 类名的样式互相污染的问题
原理 通过给使用scoped 的页面的标签 都自动添加一个唯一标识（其实就是一个不重名的自定义属性） 然后把选择器变为属性选择器 选中这个唯一标识 来保证样式的唯一性 */

</style>